
<template>
    <div>
        <span class="custom-color" v-text="msg"></span>
        <span v-text="num"></span>
        <button @click="add(1, 2)">按钮</button>

        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <div>
            路由占位符
            <router-view></router-view>
        </div>

        <div>
            <mt-button type="danger" size="large" @click="add(3, 4)">danger</mt-button>
            <mt-button type="default" size="normal" @click="tipToast">toast实验</mt-button>
        </div>
        <div>
            mui的九宫格
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-home"></span>
                        <div class="mui-media-body">Home</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                        <div class="mui-media-body">Email</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-chatbubble"></span>
                        <div class="mui-media-body">Chat</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-location"></span>
                        <div class="mui-media-body">location</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-search"></span>
                        <div class="mui-media-body">Search</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-phone"></span>
                        <div class="mui-media-body">Phone</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-gear"></span>
                        <div class="mui-media-body">Setting</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-info"></span>
                        <div class="mui-media-body">about</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                        <span class="mui-icon mui-icon-more"></span>
                        <div class="mui-media-body">more</div></a></li>
                </ul>
            </div>
            MUI的图文
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;" class="">
                        <img class="mui-media-object mui-pull-left" src="http://www.dcloud.io/hellomui/images/shuijiao.jpg">
                        <div class="mui-media-body">
                            幸福
                            <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="http://www.dcloud.io/hellomui/images/muwu.jpg">
                        <div class="mui-media-body">
                            木屋
                            <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="http://www.dcloud.io/hellomui/images/cbd.jpg">
                        <div class="mui-media-body">
                            CBD
                            <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                        </div>
                    </a>
                </li>

            </ul>
        </div>

    </div>
</template>

<script>
    import {substract, PI} from "./testFun01";
    import {Toast} from 'mint-ui';
    function add(x, y) {
        console.log('result:', x + y);
    }
    export default {
        data(){
            return {
                msg: 'yf vue demo',
                num: PI,
            }
        },
        methods:{
            add, // es6写法, 等价于 add:add
            add1: add,
            tipToast(){
                Toast({
                    message: '提示',
                    position: 'bottom',
                    duration: 5000
                });
            },
            
        },
        created(){}
    }
</script>

<style scoped="">
    .custom-color{
        color: #0e0;
    }
</style>